<template>
  <div>
    <div class="header">
      <div class="return flex">
        <router-link to="/home">
          <i class="iconfont icon-jiantou f14 red"></i>
          <span class="f14 red">返回</span>
        </router-link>
      </div>
      <div class="title f16">商品详情</div>
      <div class="none"></div>
    </div>
    <div style="height: 46px;"></div>
    <!-- <div style="height: 46px;"></div> -->
    <!-- 轮播图 -->
    <goodsDetailSwiper :imgList="productInfo.banners"></goodsDetailSwiper>
  
    <!-- 商品信息 -->
    <div class="goodsMian">
      <div class="title">
        <span class="f12" style="color: white;background-color: rgb(120, 160, 209);margin-left: 5px;">直降</span>
        <span class="f12" style="color: white;background-color: rgb(145, 188, 111);margin-left: 5px;">包邮</span>
        <span class="f16 fw100">{{ productInfo.masterName }}</span>
  
      </div>
      <div class="titleDetail">
        <span class="f999 f14">{{ productInfo.slaveName }}</span>
      </div>
  
      <div class="goodsPrice">
        <div class="left">
          <span class="f14 red">
            ￥
          </span>
          <span class="red f18">
            {{ (productInfo.maxPrice / 100).toFixed(2) }}
          </span>
          <span class="three f12 f999">
            ￥{{ (productInfo.minPrice / 100).toFixed(2) }}
          </span>
        </div>
        <div class="right">
          <span class="f999 f12">{{ productInfo.inventory }}人购买</span>
        </div>
      </div>
      <div class="goodsNumber">
        <span class="f999 f14">规格：x3</span>
        <i class="iconfont icon-jiantouyou f999 f14" style="margin-right: 6px;"></i>
      </div>
      <div class="address">
        <div class="left">
          <span class="f999 f14">配送至：</span>
          <span class="one fw100 f14">广西玉林博白县顿谷镇顿谷村</span>
        </div>
        <div class="right">
          <i class="iconfont icon-jiantouyou f999 f14"></i>
        </div>
      </div>
      <div class="baged">
        <i></i>
        <span class="f11 f999">包邮</span>
      </div>
    </div>
  
  
    <div class="goodsMainDetail">
      <div class="navT">
        --商品信息--
      </div>
      <div>
        <img v-for="(pic, index) in productInfo.descPics" :key="index" :src="pic" alt="商品详情图">
  
      </div>
      <div class="flowTitle f13 f999">
        --预定流程须知--
      </div>
      <img src="https://file.sdyxmall.com/h5/v1/public/app/img/group5.b0b24d0.png" alt="">
    </div>
    <div class="flow">
      <p class="wf500 f999 flowOne f12">一、关于发货</p>
      <p class="wf100 f999 flowTwo f12">个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；</p>
      <p class="wf500 f999 flowOne f12">一、关于发货</p>
      <p class="wf100 f999 flowTwo f12">个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；</p>
      <p class="wf500 f999 flowOne f12">一、关于发货</p>
      <p class="wf100 f999 flowTwo f12">个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；</p>
      <p class="wf500 f999 flowOne f12">一、关于发货</p>
      <p class="wf100 f999 flowTwo f12">个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；</p>
    </div>
    <div class="goodsDetailButton">
      <div class="left">
        <div class="goodsDetailButtonItem middle">
          <img src="../../../assets/img/客服.png" alt="">
          <span class="f10 f999">客服</span>
        </div>
        <div class="goodsDetailButtonItem middle">
          <img src="../../../assets/img/爱心.png" alt="">
          <span class="f10 f999">收藏</span>
        </div>
  
        <router-link to="/cart">
          <div class="goodsDetailButtonItem-cart">
            <div class="goodsDetailButtonItem middle">
              <img src="../../../assets/img/购物车.png">
              <span class="f10 f999">购物车</span>
            </div>
            <span class="cart-badge">{{cartNum? cartNum : '' }}</span>
          </div>
        </router-link>
      </div>
  
      <div class="right">
        <div class="rightCart middle" @click="addCart">
          加入购物车
        </div>
        <div class="rightPay middle">
          立即购买
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import goodsDetailSwiper from './goodsDetailSwiper.vue'
export default {
  components: {
    goodsDetailSwiper
  },
  data() {
    return {
      productInfo: {},// 存储商品详情数据
      cartNum: 0 // 购物车数量
    };
  },

  created() {
    this.getProductDetail();
    this.addHistory();
  },
  methods: {
    async getProductDetail() {
      try {
        const res = await request.get("/product/detail", {
          params: {
            productId: this.$route.params.productId
          }
        });
        this.productInfo = res.result;
        this.cartNum = res.result.cartNum;
        console.log('商品详情数据:', this.productInfo);
      } catch (error) {
        console.error('获取商品详情失败:', error);
      }
    },

    async addCart() {
      // alert('加入购物车成功');
      // let res = await request.post("/cart/add", { productId: this.productInfo.productId });
      // 使用query
      request.post('/cart/add', { productId: this.productInfo.productId }).then(res => {
        this.$router.push({
          path: '/cart',
          // path: '/demo',
          query: {
            orderData: JSON.stringify(res),// 将数组转为JSON字符串     
          }
        });
      })
      this.cartNum++;

    },

    addHistory() {
      // 记录浏览记录
      request.post('/history/add', { productId: this.$route.params.productId });
    }

  }
}
</script>
<style lang="less" scoped>
@import 'goodsDetail.less';

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>